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Е 
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Пару слов обо мне 


Верстка с 2005 года 


Флешер до 2012 года Ө 


Frontend Lead в компании 
«Рунет Бизнес Системы» 
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5 Apple Pay Session 
Total 5$ оре 
«Рау 
кемге R click 


<script src="https://service.com/lib.js"> 


lib-child.js 


Frontend 
Conf 2022 


История iframe frame 
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История iframe 


Netscape 6 ТЕД + 


Е Frontend 
Conf 2022 


Я использовал FRAME = — 
для фиксированного меню 


3 |I" 
p — - ве пне" >. 
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Поисковые проекты 
музея 


Совет школьного музея «Сила памяти, эмоциональная сила живых рассказов такова, что для них как бы 
как ers не существует дистанции времени: будто с тобой это происходит... или у тебя на 
глазах» (А.Адамович о книгах С.Алексеевича). 


Рассказ № L31 L41 


Рассказ N?1 


Мой известный неизвестный герой, 


Война на совесть постаралась 

Она Огонь и смерть на нас обрушив, 
вошла не только в души, 

Не только в памяти осталось... 


Первый дар, который получает человек, появившийся на свет, 
имя. Каждое имя таит в себе особое значение. Не случайно ведь 
говорят: “ По имени и житие “. 

Именно дела, доброе имя остаётся после смерти человека, 
сохраняя память о нём. Война лишила многих героев имён, и так 
важно, чтобы память о них жила. 


Никто не знает их фамилий, 

О них ни песен нет, ни книг, 
Здесь чей-то сын, и чей-то милый, 
И чей-то первый ученик. 

(Г. Казакова ) 


60 лет после войны. Жизнь целого поколения. Но до сих пор есть 
могилы неизвестного солдата, безымянные герои, а сколько без 
вести пропавших? 


Открыто все своё писали имя, 
Чтоб знали люди будущих времён, 
Что подвиг сей свершенный всеми ими, 


Во имя человечества свершён. | ЕС Frontend 


К чести нашей литературы, многих героев мы давно знаем по Conf 


История iframe 
HTML 


Кратко об Игате 


Ваша страница 


https: / /4отаіп. сот 


«iframe src="https://other—domain. сот" /> 


https: //other-domain.com 
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Кратко об iframe 


e Загружает в область заданных размеров любые другие 
независимые документы 


* Был слабо защищен, поэтому имеет плохую репутацию 


"прохол Т 
- ЗАПРЕЩЕН 


ја Frontend 
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Итого Ha 2О22-й 


* Полностью изолирован от родительского документа 


* Не показывает изменение урла для родителя 
(если разные домены) 


e Но он всё так же может едемать етранину мешать 
пользователю А 


/ / 
Чоч shall not р ех / \ | 


y »1 
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Q 


Sandbox 


<iframe src="... апабох=" значение" /> 


Пустое значение 
allow-forms 


allow-pointer-lock 


allow-popups 


Включить все ограничения 


Разрешить отправку данных форм 


Разрешить использование Pointer Lock АРТ 


(захват движения мышью) 


Разрешить всплывающие окна 
(window.open(), target="_blank” и др.) 
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Атака типа clickjacking 


Ip Пользователь! 11. 


Вам одобрили займ в 50к 


Перейти по ссылке 
ЕС тоо 


Clickjacking 
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Защита. Заголовок X-Frame-Options 


ОЕМУ 


• Никогда не показывать страницу внутри фрейма. 


SAMEORIGIN 


* Разрешить открытие страницы внутри фрейма только B том случае, если 
родительский документ имееттот же источник. 


ALLOW-FROM domain 
* Разрешить открытие страницы внутри фрейма только B TOM случае, если 


родительский документ находится на указанном в заголовке домене. 
ie Frontend 
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Сайт site.com не позволяет установить соединение. 


Защита. Заголовок X-Frame-Options 


ОЕМУ 


• Никогда не показывать страницу внутри фрейма. 


SAMEORIGIN 


* Разрешить открытие страницы внутри фрейма только B том случае, если 
родительский документ имееттот же источник. 


ALLOW-FROM domain 
* Разрешить открытие страницы внутри фрейма только B TOM случае, если 


родительский документ находится на указанном в заголовке домене. 
Е Frontend 
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Защита. Content-Security-Policy 


frame-ancestors 


Content-Security-Policy: frame-ancestors 'self' 
example.com ж.ехатріе.пеї; 
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Защита. Закроемся div 


<style> 
#protector { 
height: 100%; width: 100%; position: absolute; 
left: 0; top: 0; z-index: 99999999; 


</style> 
«div id="protector"> 
«a href="/" target="_blank">NMepentu к сайту</а> 
</div> 
<script> 
if (top.document.domain == document.domain) { 
protector. remove(); 


</script> 
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BITB (Browser In The Browser) attack 


Делает фишинг практически незаметным 


+ Log into Facebook | Facebook - Google Chrome 


й facebook.com 


Phishing 


Log Into Facebook 


Forgot account? 


or 
Create new account 


Not now 


+ Log into Facebook | Facebook - Google Chrome  — 


ё facebook.com 


ok Create new account 


Real 


Log Into Facebook 


pK 


Forgot account? 


or 
Create new account 


Not now 
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BITB (Browser In The Browser) attack 
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Можно ли получить доступ к iframe? 


При условии, что разные домены 


domain.com 
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Можно, если договориться 


PostMessage и "message" 


otherWindow.postMessage(message, targetOrigin); 


otherWindow 
Ссылка Ha другое окно. Для iframe ero parent. 


message 
Данные, которые нужно отправить в другое окно. 


targetOrigin 
Определяет источник для окна-получателя, только окно с данного источника 
имеет право получить сообщение. 


Если мы не хотим проверять, то в targetOrigin можно указать 7. Frontend 
or Conf 2022 


Пример. Закинем информацию в iframe 


<iframe src="http://example.com" пате="ехатр [е"> 


<script> 
let win = window. Тгате5 . ехатр le; 


win.postMessage("message", "http://example.com"); 
</script> 
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Пример. Ловим информацию в iframe 


window. addEventListener("message", function(event) 4 


if (event.origin != "http://frontendconf.ru") 1 
// что-то пришло c неизвестного домена. Проигнорируем это 
return; 


alert( "received:" + event.data ); 
// Можно отправить ответ через event.source.postMessage(...) 


J); 
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Сила iframe © 


- Вам требуется создать виджет для встраивания на другие сайты? 


* Это может быть OT прогноза погоды до покупки авиабилетов 


<>@ | PARTNER.COM | 


NOUCK omened 


ЗАЕ> 0 Быезд 


[24.10.2022 )-|25.10.2022 | 
7 Е 


Проблемка 


CORS 


Cross-Origin Resource Sharing 
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CORS 


ample.com 
ex 


ар!. сот 


BACK 
FRONT 


за 
30 


CORS 
exam ole .com 


api.com 


OPTIONS 0: 
3 


FRONT BACK 


CORS 
example.com 


api.com 


OPTIONS 05: 
; 


FRONT BACK 


CORS 


le.com 
MD 
exa 


aC I.COM 
'OWS 
1 OPTI ўс; 
T 7 — 
ONT ФЕ 
ER 


іс 
SET-COOK! 


за 
30 


CORS 
example.com 


OPTIONS ту 
„Ги. 


СЕН BACK 


5 Е 7-СОО кі РР FC Frontend 
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api.com 


CORS 
example.com 


OPTIONS об 
заря BACK 
Ж [= 


api.com 


Safari против 


е Конфиденциальность 


3 © ES е 8 Ш ® b p Фр 


Основные Вкладки Автозаполнение Пароли Поиск Безопасность Конфиденциальность Веб-сайты Расширения Дополнения 


Отслеживание на веб-сайт х: Предотврашать перекрестное отслеживание 


Скрывать ІР-адрес: Скрывать ІР-адрес от трекеров 


С помощью Вашего ІР-адреса можно собирать такие персональные данные, как 
геопозиция. Для защиты этой информации Safari может скрывать Ваш ІР-адрес 
от известных трекеров. Подробнее... 


Файлы cookie и данные веб-сайтов: Блокировать все файлы cookie 


Управлять данными веб-сайтов... 


Арріе Рау и Арріе Сага: Веб-сайты могут проверять, настроены ли функции Арріе Рау и Арріе Сага 


Покупки в Safari можно оплачивать онлайн с помощью Apple Рау и Apple Card. 
Для подтверждения платежа используйте iPhone или Apple Watch. 


Веб-реклама: Разрешить конфиденциальные рекламные отчеты 
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PCIDSS 


Payment Card Industry Data Security Standard (PCI DSS) 


Разрешает прием карточных данных на стороне владельца PCI DSS 


DSS 


А COMPLIANT 
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Total 5$ 
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service.com 
<> © |suop.com | 
Total 5$ 


Apple Pay Session 
C у 
L1 


«script src="https://service.com/lib.js"> 


servicelcom/child.html 


lib-child.js 
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Кроссдоменные запросы через iframe 


. Нетеряет куки 
. Владелец сайта не имеет доступа к конфиденциальным данным 


· Например, так работает Яндекс.Метрика и Google Analytics 
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Sho {00 


Card Number 


Expiry (ус/сум 


PAY 


9 
“а 
30 


Sho {00 


Card Number 


Expiry 
7 NI 


(ус/сум 
/ 


AN VA 


PAY 


9 
“а 
30 


{00 
Sho 


Card Number 


9 
“а 
30 


Sho {00 


Card Number 


Sho {00 
type ReqMessageObject 


type: 'req'; 
Card Number funcName: string; 


params: any; 
id: string; 


У; 


type ResMessageObject 
type: ‘res'; 
result: any; 
error: any; 
id: string; 


$; 


|| 
еле 


|| 
ең 
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github.com/avin/commutator 
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CSS CSS 
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CSS 
CSS 


css = 


Порталы 


Будущее iframe 
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eoe @ Document х ШЕ 


e 
> 
м 
a 
№ 


= С ё portal.liqu.ru 


Demo 


Lorem ipsum, dolor sit amet consectetur Lorem ipsum dolor sit, amet consectetur 
adipisicing elit. Accusamus veritatis qui, adipisicing elit. Voluptatem dicta expedita non 


quis omnis esse, culpa veniam ea tempora reprehenderit praesentium autem 
dignissimos enim voluptates nihil ex molestiae voluptate, nostrum esse, iste eos 
consectetur maxime ipsa, dolores veritatis. Magni impedit laudantium animi 
perspiciatis. Ad beatae numquam molestias dolor aspernatur at exercitationem 
molestiae non! Voluptatum, odio. doloribus ratione libero dignissimos, error, 
Corporis exercitationem ab aut in minus deleniti iure ullam, nulla sed quam 
accusamus dignissimos eaque a fugit temporibus quo laboriosam quia rem modi 
dolor quia voluptatem obcaecati fuga. Natus, iure molestiae recusandae 


assumenda, laborum velit perspiciatis ut suscipit tempore vero magni, eaque voluptas 
blanditiis et nesciunt architecto quos quo sint voluptates totam in? Ipsam maxime 
aperiam. Ab error placeat maiores inventore repudiandae sapiente minus in 
maxime rerum, harum ipsam repudiandaeaspernatur, dolores labore tempore animi 
nereniciatie laudantium. doloribus numauam harum odit similique fugiat. 


L3 Pe | nisi id nostrum facere dolore 
— ШТ... „пони ІШСЕ 2 змов | : 
БЕС. non doloremque, perspiciatis asperiores delectus dolorum quisquam 
жепо 


зі т, optio, totam eum? Totam neque distinctio labore facere 

itibus beatae doloremque architecto aliquam possimus incidunt cum, 
> қ jumquam vitae id quaerat nihil cumque in sunt, nam, ad saepe. Fugit 
« eee | [m Sapiente iure explicabo eaque quae maiores ipsum dolore. Enim 

f Е © С m eum sit accusamus quidem repudiandae nobis exercitationem sequi 
) N r te N O Г Каз delectus Шо Піс, incidunt reiciendis minima sed debitis temporibus at 
—€— rene зачат, sapiente voluptates aspernatur ullam dolor. Architecto delectus 
Москва Старт хеб на Красном Октябре (ex Digital October) ere est culpa quibusdam aspernatur aperiam perferendis voluptatem 
троге vitae accusamus, quo accusantium quod eveniet eos. Similique illo 
« us аа dignissimos unde ut ratione, quis ducimus eius veritatis 
® tis quibusdam laudantium dolores velit perferendis. Perferendis 
accusamus nulla quaerat sed in optio. Possimus nesciunt quo enim laudantium 


ж 


E| купить билет © купить видео 2021 | gS стать партнёром 
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Порталы 


FRONT.RU 
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Порталы 


ERONT.RU CONF.RU 


== 


Быны. нк) A — 
= 
A 
M 4 
A 
SEE 
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Порталы 


// Создаем портал со страницей. Kak iframe 

// Вы можете использовать тег <portal> 

portal = document.createElement ("portal"); 
portal.src = "https://frontendconf. ru/moscow/2022"; 
Dortal.style = "..."; 

document. body. appendChild(portal) ; 


// Когда пользователь нажмет на превью портала 

// Можно вызвать анимацию, например, увеличение портала 
// И закончите, выполнив переход 

portal.activate(); 
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Порталы 


М Chrome 
Chrome Edge Safari Firefox Opera IE for 


Android 
ава | 12-00 а 
жом 


ТР 
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Порталы 


chrome:/flags/#enable-portals 


@ Enable Portals. 
Portals are an experimental web platform feature that allows embedding and seamless 
transitions between pages. See https://github.com/WICG/portals and 
https://wicg.github.io/portals/ - Mac, Windows, Linux, ChromeOS, Android, Fuchsia, Lacros 


#enable-portals 


@ Enable cross-origin Portals. 
Allows portals to load cross-origin URLs in addition to same-origin ones. Has no effect if 
Portals are not enabled. - Mac, Windows, Linux, ChromeOS, Android, Fuchsia, Lacros 


#enable-portals-cross-origin 


Enabled 


Enabled ~ 
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5 Apple Pay Session 
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<script src="https://service.com/lib.js"> 


lib-child.js 
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Заключение 


iframe 


* Развивается, несмотря на возраст. 
* Безопасен, если уметь правильно его готовить. 


* Временами iframe — единственный вариант для реализации 
виджетов. 
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Спасибоза внимание! 


Telegram: and_kuznetsov 
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